<template>
  <div class="project-info-wrapper" :class="{'project-unfold':!collapse}">
    <el-button id="toggleFullScreen" @click="changeToFullScreen">
      <svg-icon class="svgClass" icon-class="up-arrows" :style="{transform:foldArrow}" />
    </el-button>
    <div class="cover-line" />
    <div class="cover-line" />
    <div id="mapWrapper" class="map-wrapper" @mouseover.stop="buildHoverHandler">
      <img v-show="collapse" :src="mapSrc">
      <img :src="mapSrcAll">
      <!--1#教学综合楼-->
      <span id="1" data-num="1" />
      <!--4#教学综合楼-->
      <span id="4" data-num="4" />
      <!--7#女生宿舍楼-->
      <span id="7" data-num="7" />
      <!--3#科技楼-->
      <span id="3" data-num="3" />
      <!--2#艺术楼-->
      <span id="2" data-num="2" />
      <!--5#食堂-->
      <span id="5" data-num="5" />
      <!--6#体育馆-->
      <span id="6" data-num="6" />
      <!--幼儿园-->
      <span id="9" data-num="9" />
      <!--8#男生宿舍楼-->
      <span id="8" data-num="8" />
    </div>
    <div class="project-info-content">
      <h1>工程信息</h1>
      <h2>Surveillance video</h2>
      <div class="project-info-detail"><span>项目面积(㎡)：</span><span>{{ projectInfo.builtArea }}㎡</span></div>
      <div class="project-info-detail"><span>投资金额(万元)：</span><span>{{ projectInfo.projectCost }}万元</span></div>
      <div class="project-info-detail"><span>项目类型：</span><span>{{ projectInfo.projectType }}</span></div>
      <div class="project-info-detail"><span>建设单位：</span><span>{{ projectInfo.constructionUnit }}</span></div>
      <div class="project-info-detail"><span>监理单位：</span><span>{{ projectInfo.supervisorUnit }}</span></div>
    </div>
    <div class="project-date-time">
      <span class="project-time">{{ nowTime }}</span>
      <span class="project-date">{{ nowDate }} {{ nowWeek }}</span>
    </div>
    <div class="warning-living">
      <div class="project-warning">
        <i class="el-icon-warning" />
        <div class="project-warning-text">
          <span>警告！</span>
          <dl>
            <dt>
              注意：
            </dt>
            <dd>
              <p>1.未带安全帽警报</p>
              <p>2.塔吊警报（8级）</p>
            </dd>
          </dl>
        </div>
      </div>
      <div class="project-living">
        <div>
          <img src="../../assets/images/home-monitor.png" alt="">
          <p>现场监控</p>
          <span>Surveillance video</span>
        </div>
        <div>
          <video-player
            id="videoPlayer"
            ref="videoPlayer"
            class="video-player vjs-custom-skin"
            :options="playerOptions"
            @ready="playerIsReady"
          />
          <p>东大门</p>
        </div>
      </div>
    </div>
    <!--建筑物提示信息-->
    <div id="tooltip" class="tooltip">
      <p class="location">{{ buildLocation }}</p>
      <p class="content">{{ buildContent }}</p>
      <p class="remark">{{ buildRemark }}</p>
      <div class="location-icon">
        <img src="../../assets/images/location.png">
        <div class="vertical-align-line" />
      </div>
    </div>
    <!--直播列表弹窗-->
    <div id="liveChannelList">
      <span class="channel-list-title trapezoid-title">摄像头监控</span>
      <i class="el-icon-close" />
      <slider ref="slider" :options="options">
        <slideritem v-for="(monitor,index) in monitorArr" :key="index">
          <div v-for="(router,order) in monitor" :key="order">
            <svg-icon class="svgClass" icon-class="monitor"/>
            <span>{{router.name}}</span>
            <span>{{router.num}}</span>
          </div>
        </slideritem>
        <div slot="loading">loading...</div>
      </slider>
      <div class="swiper-btns">
        <svg-icon class="svgClass" icon-class="up-arrows" @click="upChangeTxt" />
        <svg-icon class="svgClass" icon-class="down-arrows" @click="downChangeTxt" />
     </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions, mapState } from 'vuex'
import { debounce } from 'lodash'
import { slider, slideritem } from 'vue-concise-slider'
import 'videojs-flash'
import 'videojs-hotkeys'
import { options } from 'runjs'
require('videojs-contrib-hls')

export default {
  name: 'ProjectInfo',
  data() {
    return {
      playerOptions: {
        width: '167',
        height: '87',
        responsive: true,
        autoplay: true,
        muted: true,
        controls: true,
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: [{
          // withCredentials: false,
          type: 'video/mp4',
          // src: "http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8",
          src: 'https://www.w3cschool.cn/statics/demosource/mov_bbb.mp4'
        }],
        controlBar: {
        }
      },
      mapSrc: require('@/assets/images/project-map-1.png'),
      mapSrcAll: require('@/assets/images/project-map-2.png'),
      collapse: true, // 当前展开还是收起(默认收起)
      buildLocation: '', // 建筑物位置信息
      buildContent: '', // 建筑物的文字内容
      buildRemark: '', // 建筑物的备注
      targetBuilding: '', // 目标建筑物
      dialogVisible: true, // 模态框显隐
      options: { // 滑动插件配置选项
        currentPage: 0,
        slidesToScroll: 1, // 每次滑动项数
        direction: 'vertical'
      },
      monitorArr:[
        [
          {name:'摄像头1',num:'1243'},
          {name:'摄像头2',num:'1244'},
          {name:'摄像头3',num:'1245'},
          {name:'摄像头4',num:'1246'},
          {name:'摄像头5',num:'1247'},// 摄像头
          {name:'摄像头6',num:'1248'}
        ],
        [
          {name:'摄像头7',num:'1249'},
          {name:'摄像头8',num:'1250'},
          {name:'摄像头9',num:'1251'},
          {name:'摄像头10',num:'1252'},
          {name:'摄像头11',num:'1253'},
          {name:'摄像头12',num:'1254'}
        ]
      ] // 摄像头
    }
  },
  components:{
    slider,
    slideritem
  },
  computed: {
    ...mapState('home', {
      projectInfo: state => state.projectInfo
    }),
    ...mapGetters([
      'projectsId'
    ]),
    foldArrow() {
      return this.collapse ? 'rotate(-90deg)' : 'rotate(90deg)'
    }
  },
  mounted() {
    this.getProjectInfoHandle(this.projectsId) // 获取工程信息
  },
  created() {
    this.buildingTxt = {
      1: {
        location: '1#教学综合楼',
        content: 'H=19.8 面积6304.44㎡',
        remark: '备注',
        justifyLeft: '0.14',
        justifyTop: '0.48'
      },
      2: {
        location: '2#艺术楼',
        content: '4F H=19.8 面积2111.56㎡',
        remark: '备注',
        justifyLeft: '0.7',
        justifyTop: '0.23'
      },
      3: {
        location: '3#科技楼',
        content: '4F H=19.8 面积2111.56㎡',
        remark: '备注',
        justifyLeft: '0.7',
        justifyTop: '0.13'
      },
      4: {
        location: '4#教学综合楼',
        content: 'H=19.8 面积6304.44㎡',
        remark: '备注',
        justifyLeft: '0.21',
        justifyTop: '0.66'
      },
      5: {
        location: '5#食堂',
        content: 'H=15.8 面积5203.20㎡',
        remark: '备注',
        justifyLeft: '0.49',
        justifyTop: '0.37'
      },
      6: {
        location: '6#体育馆',
        content: 'H=15.8 面积2266.95㎡',
        remark: '备注',
        justifyLeft: '0.63',
        justifyTop: '0.41'
      },
      7: {
        location: '7#女生宿舍楼',
        content: 'H=15.8 面积2774.40㎡',
        remark: '备注',
        justifyLeft: '0.1',
        justifyTop: '0.7'
      },
      8: {
        location: '8#男生宿舍楼',
        content: 'H=15.8 面积2774.40㎡',
        remark: '备注',
        justifyLeft: '0.5',
        justifyTop: '0.5'
      },
      9: {
        location: '9#幼儿园',
        content: 'H=15.8 面积5292.34㎡',
        remark: '备注',
        justifyLeft: '0.675',
        justifyTop: '0.32'
      }
    } // 建筑物信息
    this.currentTime()
  },
  methods: {
      /**
     * 向上滚动文本
     */
    upChangeTxt() {
      this.$refs.slider.$emit('slidePre')
    },

    /**
     * 向下滚动文本
     * */
    downChangeTxt() {
      this.$refs.slider.$emit('slideNext')
    },

    /**
     * 切换成大屏展示
     */
    changeToFullScreen() {
      this.collapse = !this.collapse
      this.$emit('collapseStatus', this.collapse)
    },
    ...mapActions('home', ['getProjectInfo']),
    /**
     * 自定义热键
     */
    playerIsReady(player) {
      player.hotkeys({
        volumeStep: 0.1,
        seekStep: 5,
        enableModifiersForNumbers: false,
        fullscreenKey: function(event, player) {
          // override fullscreen to trigger when pressing the F key or Ctrl+Enter
          return ((event.which === 70) || (event.ctrlKey && event.which === 13))
        }
      })
    },

    buildHoverHandler($event) {
      debounce(this.emitCollapse, 5000)
    },

    /**
     * 通知父组件当前状态
     */
    emitCollapse($event) {
      $event.stopPropagation()
      const target = $event.target || $event.srcElement
      if (target.tagName && target.tagName.toLowerCase() === 'span') {
        const tagNum = target.dataset.num
        const tooltip = this.buildingTxt[tagNum] // 获取对应的建筑物信息
        this.targetBuilding = target
        if (tooltip) {
          this.buildLocation = tooltip.location
          this.buildContent = tooltip.content
          this.buildRemark = tooltip.remark
        }
        if (!this.collapse) { // 如果当前页面已经展开
          this.locateTooltip(this.targetBuilding)// tooltip重新定位并展示新数据
        } else {
          let transitionFlag = true
          this.targetBuilding.ontransitionend = (e) => {
            if (e.target === e.currentTarget && transitionFlag) {
              transitionFlag = false
              this.locateTooltip(this.targetBuilding)
              this.targetBuilding.ontransitionend = null
            }
          }
          this.collapse = false // 界面展开
        }
      } else { // 关闭tooltip，并收起
        document.getElementById('tooltip').style.left = '-1000px'
        document.getElementById('tooltip').style.top = '-1000px'
        document.getElementById('tooltip').style.opacity = '0'
        // this.collapse = true
      }
      // this.$emit('collapseStatus',this.collapse)
    },

    /**
     * 重新定位tooltip的位置
     * @params {object} target - 点击事件对象
     */
    locateTooltip(target) {
      if (target) {
        const tooltipDom = document.getElementById('tooltip') // 获取tooltip元素
        const toolTipHeight = tooltipDom.offsetHeight
        const num = target.dataset.num
        const tooltipContent = this.buildingTxt[num]
        let justifyLeft = 0
        let justifyTop = 0
        if (tooltipContent) {
          justifyLeft = tooltipContent.justifyLeft // 获取矫正left
          justifyTop = tooltipContent.justifyTop // 获取矫正top
          const targetWidth = target.offsetWidth
          console.log('targetWidth: ', targetWidth)
          const targetHeight = target.offsetHeight
          console.log('targetHeight: ', targetHeight)
          justifyLeft = targetWidth * justifyLeft
          justifyTop = targetHeight * justifyTop
        }
        const left = target.offsetLeft + justifyLeft
        const top = target.offsetTop + justifyTop
        tooltipDom.style.opacity = '1' // 显示tooltip
        tooltipDom.style.left = left + 'px'
        tooltipDom.style.top = (top - toolTipHeight) + 'px'
      }
    },
    currentTime() {
      this.intervalTimer = setInterval(this.getDate.call(this), 1000)
    },
    getDate() {
      const date = new Date()
      const yy = date.getFullYear()
      const mm = date.getMonth() + 1
      const dd = date.getDate()
      const week = date.getDay()
      const hh = date.getHours()
      const mf =
                date.getMinutes() < 10
                  ? '0' + date.getMinutes()
                  : date.getMinutes()
      if (week == 1) {
        this.nowWeek = '周一'
      } else if (week == 2) {
        this.nowWeek = '周二'
      } else if (week == 3) {
        this.nowWeek = '周三'
      } else if (week == 4) {
        this.nowWeek = '周四'
      } else if (week == 5) {
        this.nowWeek = '周五'
      } else if (week == 6) {
        this.nowWeek = '周六'
      } else {
        this.nowWeek = '周日'
      }
      this.nowTime = hh + ':' + mf
      this.nowDate = yy + '/' + mm + '/' + dd
    },

    /**
     * 获取工程信息
     * @params {number|string} projectsId --工程Id
     */
    getProjectInfoHandle(projectsId) {
      this.getProjectInfo(projectsId).catch(err => {
        this.$message({
          message: err.msg || 'Error',
          type: 'error',
          showClose: true,
          center: true,
          duration: 2 * 1000
        })
      })
    }
  },
  beforeDestroy: function() {
    if (this.intervalTimer) {
      clearInterval(this.intervalTimer) // 在Vue实例销毁前，清除时间定时器
      this.intervalTimer = null
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/styles/mixin.scss';
#toggleFullScreen{
  position: absolute;
  top:44.7%;
  left:changePxToPercent(28,800);
  z-index:100001;
  width:60px;
  height:101px;
  background:rgba(66,155,159,0.77);
  border-radius:30px;
  display:flex;
  justify-content: center;
  align-content: center;
  cursor:pointer;
  .svgClass{
    width:22px;
    height:44px;
    fill:#a9f9f9 !important;
  }
}
.project-info-wrapper{
 width:100%;
 height:100%;
 border:2px solid rgba(99,245,245,1);
 border-radius:20px;
 background-color:#161A25;
 position:relative;
 .cover-line{
   position:absolute;
   height:2px;
   background-color:#161A25;
   width:82.625%;
   left:8.6%;
   &:first-of-type{
     top:-2px;
   }
   &:nth-of-type(2){
     bottom:-2px;
   }
 }
 &:before,&:after{
   content:'';
   width:82.625%;
   height:0px;
   border-top:1px solid #00bef2;
   position:absolute;
   left:8.6%;
   z-index:100;
 }
 &:before{
   top:-1px;
 }
 &:after{
   bottom:-1px;
 }
 .project-info-content{
   position:absolute;
   left:44px;
   top:3.57%;
   z-index:10000;
   h1{
    margin:0;
    @include fontSizeRem(24);
    font-weight:800;
    line-height:33px;
    color:rgba(0,173,181,1);
   }
   h2{
    margin:0 0 6px 0;
    @include fontSizeRem(12);
    font-weight:400;
    line-height:17px;
    color:rgba(255,255,255,1);
   }
   .project-info-detail{
    @include fontSizeRem(14);
    font-weight:300;
    line-height:24px;
    color:rgba(255,255,255,0.59);
   }
 }
 .project-date-time{
   width:100px;
   position:absolute;
   right:33px;
   top:4.73%;
   text-align:center;
   z-index:10000;
   .project-time{
     display:block;
    @include fontSizeRem(40);
    font-weight:400;
    line-height:52px;
    color:rgba(0,173,181,1);
   }
 }
 .project-date{
   @include fontSizeRem(14);
    font-weight:400;
    line-height:19px;
    color:rgba(255,255,255,1);
 }
 .project-warning{
   width:50%;
   color:#F30000;
   >i{
     float:left;
     @include fontSizeRem(56);
   }
   .project-warning-text{
     float:left;
     padding-top:12px;
     margin-left:20px;
     >span{
       padding:5px 0;
       font-size:26px;
        font-family:PingFang SC;
        font-weight:bold;
        color:rgba(255,0,0,1);
     }
     >dl{
       margin:10px 0 0 0;
       overflow:hidden;
       dt{
         float:left;
         width:60px;
         @include fontSizeRem(18);
       }
       dd{
         margin:0;
         padding-left:60px;
         @include fontSizeRem(16);
         p{
           margin:0;
           line-height:22px;
         }
       }
     }
   }
 }
 .project-living{
   display:flex;
   width:50%;
   text-align:center;
   justify-content: flex-end;
   >div:first-of-type{
     width:100px;
     >img{
       margin-bottom:0 auto 14px auto;
       display:inline-block;
      //  width:68.42%;
       width:50px;
       height:58px;
     }
     >p{
       margin:1px 0;
       @include fontSizeRem(14);
      font-weight:400;
      line-height:18px;
      color:rgba(255,255,255,1);
     }
     >span{
       @include fontSizeRem(9);
      font-weight:300;
      line-height:13px;
      color:rgba(255,255,255,1);
      white-space: nowrap;
     }
   }
   >div:nth-of-type(2){
     margin-left:5%;
     width:167px;
     >.video-player{
       width:100%;
       height:auto;
       height:87px;
     }
     >p{
       margin:0;
       @include fontSizeRem(12);
        font-weight:400;
        line-height:27px;
        height:19px;
        color:rgba(255,255,255,0.5);
        text-align:left;
        background:rgba(27,32,41,0.7);
        vertical-align:bottom;
     }
   }
 }
}
.map-wrapper{
  width:100%;
  height:100%;
  position:relative;
  border-radius:20px;
  overflow:hidden;
  >img{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    &:first-of-type{
      z-index:10
    }
    &:nth-of-type(2){
      z-index:1
    }
  }
  >span{
    position:absolute;
    z-index:100;
    transition:all linear 400ms;
    &:first-of-type{
      width:changePxToPercent(288,879);
      height:changePxToPercent(183,1032);
      left:changePxToPercent(263,879);
      top:changePxToPercent(538,1032);
      z-index:100;
    }
    &:nth-of-type(2){
      width:changePxToPercent(232,879);
      height:changePxToPercent(225,1032);
      left:changePxToPercent(122,879);
      top:changePxToPercent(400,1032);
      z-index:100;
    }
    &:nth-of-type(3){
      width:changePxToPercent(136,879);
      height:changePxToPercent(112,1032);
      left:changePxToPercent(165,879);
      top:changePxToPercent(358,1032);
      z-index:1000;
    }
    &:nth-of-type(4){
      width:changePxToPercent(114,879);
      height:changePxToPercent(114,1032);
      left:changePxToPercent(306,879);
      top:changePxToPercent(446,1032);
      z-index:1000;
    }
    &:nth-of-type(5){
      width:changePxToPercent(116,879);
      height:changePxToPercent(112,1032);
      left:changePxToPercent(372,879);
      top:changePxToPercent(493,1032);
      z-index:1000;
    }
    &:nth-of-type(6){
      width:changePxToPercent(170,879);
      height:changePxToPercent(144,1032);
      left:changePxToPercent(353,879);
      top:changePxToPercent(353,1032);
      z-index:100;
    }
    &:nth-of-type(7){
      width:changePxToPercent(155,879);
      height:changePxToPercent(127,1032);
      left:changePxToPercent(484,879);
      top:changePxToPercent(451,1032);
      z-index:100;
    }
    &:nth-of-type(9){
      width:changePxToPercent(137,879);
      height:changePxToPercent(114,1032);
      left:changePxToPercent(44,879);
      top:changePxToPercent(431,1032);
      z-index:100;
    }
  }

}
.project-unfold{
  .map-wrapper{
  >span{
    position:absolute;
    &:first-of-type{
      width:changePxToPercent(399,1918);
      height:changePxToPercent(248,1030);
      left:changePxToPercent(571,1918);
      top:changePxToPercent(526,1030);
      z-index:10;
    }
    &:nth-of-type(2){
     width:changePxToPercent(316,1918);
      height:changePxToPercent(306,1030);
      left:changePxToPercent(381,1918);
      top:changePxToPercent(338,1030);
      z-index:10;
    }
    &:nth-of-type(3){
      width:changePxToPercent(183,1918);
      height:changePxToPercent(151,1030);
      left:changePxToPercent(440,1918);
      top:changePxToPercent(283,1030);
      z-index:1000;
    }
    &:nth-of-type(4){
      width:changePxToPercent(159,1918);
      height:changePxToPercent(151,1030);
      left:changePxToPercent(628,1918);
      top:changePxToPercent(401,1030);
      z-index:1000;
    }
    &:nth-of-type(5){
      width:changePxToPercent(155,1918);
      height:changePxToPercent(152,1030);
      left:changePxToPercent(719,1918);
      top:changePxToPercent(463,1030);
      z-index:1000;
    }
    &:nth-of-type(6){
      width:changePxToPercent(224,1918);
      height:changePxToPercent(192,1030);
      left:changePxToPercent(695,1918);
      top:changePxToPercent(275,1030);
      z-index:100;
    }
    &:nth-of-type(7){
      width:changePxToPercent(208,1918);
      height:changePxToPercent(171,1030);
      left:changePxToPercent(871,1918);
      top:changePxToPercent(410,1030);
      z-index:100;
    }
    &:nth-of-type(8){
      width:changePxToPercent(301,1918);
      height:changePxToPercent(184,1030);
      left:changePxToPercent(1259,1918);
      top:changePxToPercent(208,1030);
      z-index:100;
    }
     &:nth-of-type(9){
      width:changePxToPercent(183,1918);
      height:changePxToPercent(154,1030);
      left:changePxToPercent(278,1918);
      top:changePxToPercent(380,1030);
      z-index:100;
    }
  }
}
}
.warning-living{
  padding-left:41px;
  padding-right:33px;
  width:100%;
  position:absolute;
  z-index:10000;
  left:0;
  bottom:3%;
  display:flex;
  flex-direction: row;
  justify-content: space-between;
}
.nav-links{
  position:relative;
  width:100%;
  height:20%;
  display:flex;
  flex-direction: row;
  >div:first-of-type,>:nth-of-type(3){
    width:40%;
    display:flex;
    justify-content: space-around;
    align-items: center;
    >a{
      @include fontSizeRem(26);
      font-weight:500;
      color:rgba(99,245,245,1);
      text-align:center;
    }
  }
  >div:nth-of-type(2){
    width:20%;
    border:1px solid rgba(99,245,245,0.3);
    >div{
      display:flex;
      flex-direction: column;
    }
  }
}
.tooltip{
  position:absolute;
  z-index:99;
  flex-direction:column;
  height:242px;
  opacity:0;
  >p{
    margin:0;
    padding:0;
    &:first-of-type{
      @include fontSizeRem(32);
      font-weight:400;
      line-height:42px;
      height:42px;
      color:rgba(0,173,181,1)
    }
    &:nth-of-type(n+2){
      @include fontSizeRem(14);
      font-weight:400;
      line-height:19px;
      height:14px;
      color:rgba(255,255,255,1);
    }
  }
  >div{
    display:flex;
    flex-direction: column;
    flex-shrink: 0;
    flex-grow: 0;
    width:32px;
    height:172px;
    >img{
      margin:10px 0;
      width:32px;
      height:40px;
    }
    >div.vertical-align-line{
      width:0;
      height:140px;
      border-left:1px dashed #fff;
      align-self: center;
    }
  }
}
#liveChannelList{
  position:absolute;
  left:50%;
  top:50%;
  width:380px;
  height:520px;
  margin-top:-260px;
  margin-left:-190px;
  background:linear-gradient(180deg,rgba(99,245,245,0.73) 0%,rgba(50,123,123,0.73) 100%);
  z-index:10000;
  .el-icon-close{
    position:absolute;
    right:30px;
    top:27px;
    font-size: fontSizeRem(16);
    cursor:pointer;
    color:#9CFFFB;
  }
}
.container:after {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.trapezoid-title{
  position:absolute;
  left:31%;
  top:0;
  width:38%;
  height:46px;
  text-align: center;
  line-height:46px;
  font-weight:bold;
  @include fontSizeRem(18);
  color:rgba(67,212,207,1);
  background:rgba(53,128,128,1);
  z-index:1000;
  white-space:nowrap;
  @include trapezoid(46px,26px,30deg);
  font-size:18px;
}
::v-deep .slider-item{
  padding:73px 10px 85px 10px;
  flex-wrap: wrap;
  align-items:stretch;
  box-sizing:border-box;
}
::v-deep .slider-pagination{
    display:none;
  }
.slider-item >div{
  display:flex;
 flex-direction:column;
 justify-content: center;
 .svgClass{
   width:18px !important;
   height:20px !important;
   fill:#63F5F5 !important;
   margin:0 auto;
 }
 >span:first-of-type{
   color:#327B7B;
   @include fontSizeRem(24);
 }
 >span:nth-of-type(2){
   color:#327B7B;
   @include fontSizeRem(12);
 }
}
.slider-item >div:nth-of-type(odd){
  width:calc(50% - 1px);
  border-right:1px dashed #63F5F5;
  border-bottom:1px dashed #63F5F5;
}
.slider-item >div:nth-last-of-type(2){
  &,&~div{
    border-bottom:none;
  }
}
.slider-item >div:nth-of-type(even){
  width:50%;
  border-bottom:1px dashed #63F5F5;
}
.swiper-btns{
  width:100%;
  position:absolute;
  bottom:30px;
  z-index:1000000;
  display:flex;
  flex-direction:row;
  justify-content: center;
}

@media screen and (max-height:768px){
  .project-info-wrapper{
    .project-info-content{
      h1{
        @include fontSizeRem(18)
      }
      .project-info-detail{
        @include fontSizeRem(10)
      }
    }
    .project-date-time{
      .project-time{
        @include fontSizeRem(26);
        font-weight:400;
        line-height:52px;
        color:rgba(0,173,181,1);
      }
    }
    .project-date{
        @include fontSizeRem(10);
        line-height:10px;
    }
   .project-warning{
     >i{
        float:left;
        @include fontSizeRem(38);
      }
    .project-warning-text{
      >span{
        @include fontSizeRem(17)
      }
      >dl{
        dt{
          width:42px;
          @include fontSizeRem(14);
        }
        dd{
          margin:0;
          padding-left:42px;
          @include fontSizeRem(14);
          p{
            margin:0;
            line-height:18px;
          }
        }
      }
   }
  }
  .project-living{
   >div:first-of-type{
     >img{
       width:38px;
       height:40px;
     }
    }
  }
  #toggleFullScreen{
    width:40px;
    height:67px;
    border-radius:20px;
    .svgClass{
      width:15px;
      height:30px;
    }
  }
  #liveChannelList{
    width:254px;
    height:348px;
    margin-left:-127px;
    margin-top:-174px;
  }
}
.nav-links{
  >div:first-of-type,>:nth-of-type(3){
    >a{
      @include fontSizeRem(18);
    }
  }
}
}
::v-deep .video-js{
  .vjs-modal-dialog{
    overflow:hidden;
  }
}
::v-deep .video-player.vjs-custom-skin{
  width:167px;
  height:87px;
}
::v-deep .vjs-control-bar{
  display:none;
}
::v-deep .el-dialog__wrapper{
  position:absolute !important;
}
/* @media screen and(min-width: 1024px){
  .tooltip{
    height:200px;
    >p:first-of-type{
      @include fontSizeRem(20);
    }
    >p:nth-of-type(n+2){
      @include fontSizeRem(10);
      line-height:12px;
      height:12px;
    }
    >div{
      >img{
      margin:10px 0;
      width:24px;
      height:30px;
    }
    >div.vertical-align-line{
      width:0;
      height:120px;
      border-left:1px dashed #fff;
      align-self: center;
    }
    }
  }
} */
</style>

